<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>28_浮动-特点-如果父级元素装不下浮动元素会另起一行</title>
        <style>
            #wrapper {
                /* 高度没有给 是通过内容撑开的  如果子元素都浮动了 
                那么在文档流中 内容也就不存在了 所以父盒子就没有东西
                所以才会出现2个边框合在一起 */
                width: 500px;
                border: 5px solid green;
                background-color: aqua;
            }

            .box {
                width: 200px;
                height: 100px;
                background-color: red;
                border: 1px solid black;
            }

            .box01 {
                float: left;
            }

            .box02 {
                float: left;
            }

            .box03 {
                float: left;
            }


        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 -->
            <div class="box box01"></div>
            <div class="box box02"></div>
            <div class="box box03"></div>
        </div>
    </body>
</html>